<template>
    <n-tooltip trigger="hover" placement="bottom">
        <template #trigger>
            <button @click="openDefault" class="button red">
                <div>
                    <span style="padding-right: 2px">¥{{ toolMsg?.discountPrice }}</span>
                    <span v-if="toolMsg?.discountPrice != toolMsg?.price"
                        style="color:beige; font-size: 20px; text-decoration: line-through; bottom: 0px">¥{{
                            toolMsg?.price }}</span>
                </div>
            </button>
        </template>
        付费下载无水印资源点我！还可以在此找回之前的资源哦
    </n-tooltip>
    <NModal v-model:show="showPay" title="无水印资源付费及下载" preset="card" :mask-closable="false" :bordered="false"
        style="width: 600px; height: 300px">
        <div style="display: inline-flex; justify-content: space-around; width: 100%">
            <div style="display: flex; flex-direction: column; align-items: center">
                <n-tag type="success" style="margin-bottom: 5px"> 请使用微信扫描二维码付费 </n-tag>
                <div style="position: relative">
                    <!-- 一个遮罩层，在二维码地址还未生成前盖住二维码 -->
                    <div v-if="codeUrl == undefined" class="backdropFilter cardRefresh" @click="getCodeUrl">
                        <n-spin size="large" />
                    </div>
                    <n-qr-code class="cardRefresh" :value="codeUrl" color="#18a058" :size="130" />
                </div>
            </div>
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: space-between">
                <NForm label-placement="left">
                    <NFormItem label="资源名称：" style="height: 35px">{{ props.toolName }}</NFormItem>
                    <NFormItem label="支付金额：" style="height: 35px">
                        <div>
                            <span style="color: red; font-size: 20px; padding-right: 5px">¥{{ toolMsg?.discountPrice
                                }}</span>
                            <span v-if="toolMsg?.discountPrice != toolMsg?.price"
                                style="color: gray; font-size: 12px; text-decoration: line-through; bottom: 0px">¥{{
                                    toolMsg?.price }}</span>
                        </div>
                    </NFormItem>
                    <NFormItem label="权益：" style="height: 35px">
                        <span>付款增加{{ props.addDownTimesPer }}次下载机会</span>
                    </NFormItem>
                </NForm>
                <div style="display: inline-flex; justify-content: flex-end">
                    <n-button type="error" @click="showPay = false" style="margin-right: 5px;">取消</n-button>
                    <n-button type="info" @click="queryPayStatus" :loading="taskIsQuery"
                        :disabled="codeUrl == undefined">
                        点此查询付款结果
                    </n-button>
                </div>
            </div>
        </div>
        <div style="color: gray; margin-top: 20px">注：如遇问题支付失败，可拍照截图联系我(微信号)：toolsj_cn</div>
    </NModal>
</template>
<script lang="ts" setup>
import "@/assets/button.scss";
import { createDiscreteApi } from "naive-ui";
const { dialog } = createDiscreteApi(["dialog"]);
const { message } = createDiscreteApi(["message"]);
const fatheTaskId = defineModel("taskId", { type: String, required: true });
const props = defineProps({
    toolId: {// 根据不同的工具，展示不同的下载界面
        type: Number,
        default: 0,
    },
    toolName: {
        type: String,
        required: true,
    },
    addDownTimesPer: { // 每次付款增加的下载次数，默认1次。
        type: Number,
        default: 1, // 默认1次。
    }
});

function queryPayStatus() {
    taskIsQuery.value = true; // 开启loading状态，防止用户多次点击查询按钮。
    // 查询支付状态，如果支付成功，则显示下载链接，否则继续显示二维码，直到支付成功为止。
    getOrderStatusApi(orderId).then((res) => {
        if (res.code < 0) {
            message.error(res.data as string);
        } else {
            let orderStatus = res.data as IOrderStatus;
            // 0：支付成功 1：支付中 2：订单创建失败 3：取消支付 4：转入退款 5：未支付 6：已关闭 7：已撤销 8：已退款 999：支付失败（带其他具体原因）
            if (orderStatus.status == 0) {
                message.success("支付成功！请点击下载按钮");
                codeUrl.value = undefined;
                fatheTaskId.value = orderStatus.taskId
                showPay.value = false
            } else if (orderStatus.status == 1) {
                message.warning("支付中，请稍后...");
            } else if (orderStatus.status == 2) {
                message.warning("订单创建失败，二维码刷新，请重新扫码付款！", { duration: 5000 });
                getCodeUrl(); // 重新获取二维码，并刷新页面显示二维码。
            } else if (orderStatus.status == 3) {
                message.warning("订单已取消或超时，二维码刷新，请重新扫码付款！", { duration: 5000 });
                getCodeUrl(); // 重新获取二维码，并刷新页面显示二维码。
            } else if (orderStatus.status == 4) {
                message.warning("订单已转入退款状态，请关注退款信息，如有需要，请刷新二维码重新扫码付款！", { duration: 10000 });
            } else if (orderStatus.status == 5) {
                message.warning("订单仍未支付，请扫码付款！");
            } else if (orderStatus.status == 6) {
                message.warning("订单已关闭，二维码已刷新，请重新扫码付款！", { duration: 5000 });
                getCodeUrl(); // 重新获取二维码，并刷新页面显示二维码。
            } else if (orderStatus.status == 7) {
                message.warning("订单已撤销，二维码已刷新，请重新扫码付款！", { duration: 5000 });
                getCodeUrl(); // 重新获取二维码，并刷新页面显示二维码。
            } else if (orderStatus.status == 8) {
                message.warning("订单已退款，二维码已刷新，如有需要请重新扫码付款！", { duration: 5000 });
                getCodeUrl(); // 重新获取二维码，并刷新页面显示二维码。
            } else if ((res.data as IOrderStatus).status == 999) {
                dialog.error({
                    title: "支付失败",
                    content: (res.data as IOrderStatus).message + "。如有疑问请联系管理员，日志id：" + res.logId,
                    positiveText: "确定",
                    onPositiveClick: () => { },
                });
            }
        }
        taskIsQuery.value = false; // 关闭loading状态，允许用户继续点击查询按钮。
    });
}

const toolMsg = ref({} as ITool | undefined);

const taskIsQuery = ref(false); // 表达输入的task已经在向后台查询，防止重复查询
const showPay = ref(false); //是否显示下载弹窗
const codeUrl = ref<string | undefined>(undefined); // 二维码链接

// 默认的打开方式
function openDefault() {
    showPay.value = true;
    if (codeUrl.value == undefined) {
        getCodeUrl();
        setTimeout(() => { // 因为二维码的有效期是五分钟
            codeUrl.value = undefined;
        }, 1000 * 60 * 5) // 5分钟之后自动刷新二维码
    }
}

let orderId = ""; // 订单号
function getCodeUrl() {
    taskIsQuery.value = true; // 输入框正在查询，防止重复查询
    wechatOrderFirst(props.toolId).then((res) => {
        if (res.code < 0) {
            dialog.error({
                title: "获取微信支付二维码失败！",
                content: res.data + "。如有疑问请联系管理员，日志id：" + res.logId,
                positiveText: "确定",
                onPositiveClick: () => { },
            });
        }
        codeUrl.value = (res.data as IOrder).codeUrl; // 获取二维码链接
        orderId = (res.data as IOrder).orderId;
        taskIsQuery.value = false;
    });
}

onMounted(() => {
    // 因为baseUrlKey获取需要一点时间，所以需要等待其获取完
    let timer = setInterval(function () {
        if (baseUrlKey().value != "") {
            // 获取工具信息
            getToolMsg(props.toolId).then((res) => {
                if (res.code < 0) {
                    dialog.error({
                        title: "获取工具信息异常！",
                        content: res.data + "。如有疑问请联系管理员，日志id：" + res.logId,
                        positiveText: "确定",
                        onPositiveClick: () => { },
                    });
                } else {
                    toolMsg.value = res.data as ITool;
                }
            });
            window.clearInterval(timer); // 清除定时器，避免占用资源
        }
    }, 10);
});
</script>
<style>
.cardRefresh:hover {
    /* 改变鼠标样式 */
    cursor: pointer;
    /* 鼠标悬停时显示为手型 */
}

.backdropFilter {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色 */
    z-index: 100;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    /* 确保遮罩层在所有其他元素之上 */
}

.red {
    filter: hue-rotate(155deg);
}

.red:hover {
    filter: hue-rotate(155deg) saturate(1.5);
}

.red:active {
    filter: hue-rotate(155deg) saturate(1.7);
}
</style>
